@import url('https://fonts.googleapis.com/css2?family=family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root {
  --header-font: "Source Sans Pro", "Inter", sans-serif;
  --body-font: "Source Sans Pro", "Inter", sans-serif;

  --bg-color: #EEEEEE;
  --page-color: rgba(255, 255, 255, 0.95);

  --text-color: #000000;
  --icon-color: #5c7080; /* #5c7080 */
  --bullet-color: rgba(0, 0, 0, 0.2);

  --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);

  --color-primary: 73, 197, 91;
  --color-primary-contrast: #FFFFFF;
  --color-secondary: 147, 100, 235;
  /*--color-secondary: 255, 165, 0;*/
  --color-secondary-contrast: #FFFFFF;

  /*--article-width: 800px;*/
  --article-width: 716px;
}


html, body, .roam-app {
  background-color: var(--bg-color) !important;
  overflow: hidden !important;
}

/* hide scrollbars */
::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* Chrome/Safari/Webkit */
}

/* hide scrollbars */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

h1, h2, h3,  h4, h5, h6, h1 > a, h2 > a, h3 > a, h4 > a, .rm-title-textarea {
  font-family: var(--header-font) !important;
  color: var(--text-color) !important;
  font-weight: bold !important;
}

h1.level2, h1.level2 > a, h2.level2 > a {
  font-size: 26px !important;
  font-weight: bold !important;
  height: auto !important;
  line-height: 1.5 !important;
}
h1.rm-title-display, .rm-title-textarea {
  margin-left: 20px;
}

h2.rm-level2 .rm-block-text, h2.rm-level2 textarea.rm-block-text {
  font-size: 16px !important;
  font-weight: 800 !important;
}

@media (prefers-color-scheme: dark) {
  h2.rm-level2 .rm-block-text, h2.rm-level2 textarea.rm-block-text {
    font-size: 20px !important;
  }
}
.bp3-button.bp3-minimal:hover {
  background: rgba(var(--color-primary), 0.4) !important;
  color: var(--text-color) !important;
}
.bp3-button.bp3-minimal::before, .bp3-button.bp3-minimal *, .bp3-button.bp3-minimal *::before {
  color: var(--icon-color) !important;
}
.bp3-button.bp3-minimal:hover::before, .bp3-button.bp3-minimal:hover *, .bp3-button.bp3-minimal:hover *::before {
  color: var(--text-color) !important;
}


div,
textarea, a {
  font-family: var(--body-font) !important;
  color: var(--text-color) !important;
}
.bp3-popover {
  color: var(--color-secondary-contrast) !important;
}

*[class*="bp3-icon"], *[class*="bp3-icon"]::before {
  color: var(--icon-color) !important;
}

.roam-highlight {
  background-color: rgba(var(--color-primary), 0.5);
}

.rm-block-ref {
  border-bottom: 2px solid rgba(var(--color-primary), 0.2)
}
.rm-block-ref:hover {
  background-color: rgba(var(--color-primary), 0.2);
}

.rm-alias-external, .rm-alias-external:hover {
  color: rgb(var(--color-secondary)) !important;
  font-weight: bold;
}

.rm-page-ref, .rm-alias-page, .rm-alias-page:hover {
  color: rgb(var(--color-primary)) !important;
  font-weight: bold;
}

.rm-page-ref-tag {
  color: var(--color-primary-contrast) !important;
  background-color: rgb(var(--color-primary));
  padding: 1px 6px;
  border-radius: 4px;
}

.block-highlight-blue {
  background-color: rgba(var(--color-primary), 0.2)
}

.starred-pages a {
  color: rgb(var(--color-primary)) !important;
}

.version-bullet {
  background-color: rgb(var(--color-primary)) !important;
  color: var(--color-primary-contrast) !important;
}

.roam-bullet-closed {
  background-color: var(--bullet-color) !important;
}
.simple-bullet-inner {
  background-color: var(--bullet-color) !important;
}

.rm-saving-icon .rm-synced {
  background-color: rgb(var(--color-primary));
}
.rm-saving-icon .rm-saving-remote {
  background-color: rgb(var(--color-secondary));
}

.roam-article {
  padding: 0 !important;
  width: var(--article-width) !important;
}
.roam-article, #all-pages-search, #roam-right-sidebar-content > * {
  margin: 50px 0px 100px 0px !important;
  box-sizing: border-box;
  /*position: -webkit-sticky !important;
  position: sticky !important;
  left: 0;*/
  height: auto !important;
  max-width: var(--article-width);
}

*[style*="background-color: white"] {
  background-color: var(--page-color) !important;
}
*[style*="background-color: rgb(213, 218, 223)"] {
  background-color: rgba(var(--color-primary), 0.3) !important;
}

/* -------------------------- */
/*         PAGE CARDS         */
/* -------------------------- */

.roam-article > div {
  padding: 20px 50px 30px 40px;
}

.roam-article > div {
  background: var(--page-color);
  /* position: relative; */
  border-radius: 10px;
}

.roam-article > div:first-child, #roam-right-sidebar-content > * > * {
  box-shadow: var(--page-shadow);
}

.roam-body-main {
  top: 0 !important;
  height: 100% !important;
  width: auto !important;
  position: relative !important;
  padding-left: 50px;
}

.roam-main {
  width: unset !important;
  max-width: 100% !important;
  height: 100%;

  overflow-x: scroll;
  overflow-y: hidden;
  margin: auto;
  transition: padding-left 0.15s ease-out;
}
